<template>
  <div class="category-box">
    <div class="left">
      <ul>
        <li
            v-for="(item, index) in categoryList"
            :key="index"
            :class="[{ active: currentCategoryName === item.categoryName }]"
            @click="handleSelect(item)"
        >
          <svg-icon
              v-if="!item.categoryIcon"
              icon-name="icon-danlieliebiao"
              :color="currentCategoryName === item.categoryName ? '#009a74' : '#000'"
              size="18px"
              class-name="catalog-icon"
          ></svg-icon>
          <svg-icon
              v-else
              :icon-name="item.categoryIcon"
              :color="currentCategoryName === item.categoryName ? '#009a74' : '#000'"
              size="18px"
              class-name="catalog-icon"
          ></svg-icon>
          {{ item.categoryName }}
        </li>
      </ul>
    </div>
    <div class="input-box right">
      <input type="text" placeholder="" v-model="currentQuery" @keyup.enter="handleQuerySelect" class="input"/>
      <span class="span" @click="handleQuerySelect">搜</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['getSoftListByCate']);

defineProps<{
  categoryList: Array<{
    categoryIcon: string;
    categoryName: string;
    categoryId: string;
  }>;
}>();

// 点击分类
// 点击分类
const currentCategoryName = ref<string>('全部');
const currentCategoryId = ref<string>('');
const currentQuery = ref<string>('');
const handleSelect = (item: any) => {
  currentCategoryId.value = item.categoryId;
  currentCategoryName.value = item.categoryName;
  if (currentCategoryName.value === '全部') {
    emit('getSoftListByCate', '');
    return;
  }
  let queryParams = {
    categoryId: currentCategoryId.value,
  };
  emit('getSoftListByCate', queryParams);
};
const handleQuerySelect = () => {
  let queryParams = {
    categoryId: currentCategoryId.value,
    currentQuery: currentQuery.value
  };
  emit('getSoftListByCate', queryParams);
};

</script>
<style lang="scss" scoped>
.category-box {
  width: 100%;
  display: flex;
  min-height: 42px;
  justify-content: space-between;

  .left {
    ul {
      display: flex;

      li {
        list-style: none;
        padding: 0 25px;
        height: 42px;
        border-radius: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        letter-spacing: 4px;
        margin-right: 10px;
        transition: all 0.3s;
        border: 1px solid transparent;
        user-select: none;

        &:hover {
          color: #009a74;
        }

        .catalog-icon {
          margin-right: 10px;
        }
      }

      .active {
        color: #009a74;
        border: 1px solid #2ddd9d;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    padding: 0 5px 0 0;

    .sort-box {
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: rgb(181, 181, 181);
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
      user-select: none;

      span {
        margin-left: 2px;
      }
    }

    .active {
      color: #018060;
    }
  }
}
.input-box {
  position: relative;
  display: inline-block;
  bottom: 4px;
}
.input  {
  padding: 0 40px 0 20px;
  width: 160px;
  height: 38px;
  font-size: 14px;
  border: 1px solid #018060;
  border-radius: 40px;
  background: #ffffff;
  transition: width .5s;
  transition-delay: .1s;
}

.span {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  color: #018060;
  text-align: center;
  background: #222;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.input:focus {
  width: 230px;
  outline: none;
  box-shadow: none;
}

.input:focus+.span {
  background-color: pink;
  color: #fff;
}
</style>
